<template>
	<view class="">
		<u-navbar :title="title1" :autoBack="true" placeholder></u-navbar>
		<view class="head">
			<view class="u-flex u-flex-y-center">
				<image src="" class="head__tx" mode=""></image>
				<view class="" style="flex: 1;">
					<view class="u-flex u-flex-items-end">
						<view class="head__name">
							南工职论坛官方君
						</view>
						<view class="head__eye">
							1281人围观
						</view>
					</view>
					<view class="head__time">
						1小时前
					</view>
				</view>
				<view class="head__jb">
					举报
				</view>
			</view>
			<view class="head__title">
				<view class="head__zd">
					置顶
				</view>
				0090汉堡工厂1元吃堡 初遇之礼
			</view>
			<view class="head__text">
				0090汉堡工厂1元吃堡 初遇之礼““”“ 薅羊毛
				啦!!!看看你的室友有没有注册?
				首次注册(0090汉堡工厂十)小程序的用户领卷即…
			</view>
			<view class="head__pics" :class="pics.length%3==0?'u-flex-between':''">
				<!-- <image src="" class="head__pics__item" v-for="(item,index) in pics" mode="aspectFill"
					:class="index%3-2?'':'mr0'" :key="index">
				</image> -->
				<image src="" class="head__pics__pic" :class="pics.length%3==0?'head__pics__pic1':''" v-for="(item,index) in pics" mode="aspectFill" :key="index"></image>
			</view>
			<view class="u-flex u-flex-y-center u-flex-between">
				<view class="head__ht">
					<image src="/static/home/huati.png" class="head__ht__icon" mode=""></image>
					新鲜事
				</view>
				<view class="u-flex u-flex-y-center">
					<image src="/static/home/fx.png" class="head__icon" mode="" style="width: 40rpx;height: 40rpx;">
					</image>
					<view class="head__num">
						分享
					</view>
					<image src="/static/home/dz.png" v-if="!isdz" class="head__icon" mode="" @click="clickdz"></image>
					<image src="/static/home/dzth.png" v-else class="head__icon" mode="" @click="clickdz">
						<view class="head__num">
							123 很赞
						</view>
				</view>
			</view>
			<view class="u-flex u-flex-y-center" style="margin-top: 36rpx;">
				<image src="/static/home/rb.png" class="head__rb" mode=""></image>
				<view class="" style="flex: 1;">
					<swiper :vertical="true" :interval='true' interval='3000' style="height: 88rpx;" :autoplay="true">
						<swiper-item v-for="(item, index) in 10" :key="index" style="height: 88rpx;">
							<view class="u-flex u-flex-y-center u-flex-between" style="width: 100%;">
								<view class="head__text" :style="{textIndent:index<3?'36rpx':'0'}">
									<image v-if="index<3" :src="'/static/home/index'+(index+1)+'.png'" class="head__text__indexicon" mode=""></image>
									<text class="head__text__index" v-else>
										{{index+1}}
									</text>
									为什么把我骂公猪的删了 看不得我调教公猪?poasjdojskahdksajnbasd;jasldjakslhdkajnsh
								</view>
								<image src="/static/home/huo.png" class="head__iconr" mode=""></image>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>
		<u-gap height="10rpx" bgColor="#f8f8f8"></u-gap>
		<view class="box">
			<view class="box__title">
				评论 (1)
				<view class="box__title__tab">
					<view class="box__title__tab__item" v-for="(item,index) in tab" :key="index" @click="curtab=index"
						:class="curtab==index?'active':''">
						{{item.name}}
					</view>
				</view>
			</view>
			<view class="box__item" v-for="(item,index) in 2" :key="index" style="margin-bottom: 6rpx;">
				<view class="box__item__l">
					<image src="" class="box__item__tx" mode="aspectFill"></image>
				</view>
				<view class="box__item__r" @click="show1=true">
					<view class="u-flex u-flex-y-center u-flex-between">
						<view class="box__item__name">
							小小
						</view>
						<image src="/static/home/dz.png" @click.stop="clickdz" class="box__item__icon" mode=""></image>
					</view>
					<view class="box__item__contxt">
						jashdkjhaskjdhashbdasjhbfahsbfah哈达阿布多啊啊收到货啊就是几号的啊挥手道别哈不会好礼哦啊发经发局
					</view>
					<image src="" class="box__item__pic" mode=""></image>
					<view class="box__item__time">
						刚刚
					</view>
					<!-- 回复内容 -->
					<view class="" style="background-color: #f5f6f8;padding:0 30rpx;margin-top: 30rpx;">
						<view class="box__item" style="padding: 30rpx 0;border-bottom: 1rpx solid #e8e8e8;" v-for="(item1,index1) in 2" :key="index1" :style="{borderBottom:(index1+1)==2?'0':'1rpx solid #e8e8e8;'}">
							<view class="box__item__l" style="width: 70rpx;">
								<image src="" class="box__item__tx" mode="aspectFill" style="width: 45rpx;height: 45rpx;"></image>
							</view>
							<view class="box__item__r" @click="show1=true" style="padding-top: 10rpx;">
								<view class="u-flex u-flex-y-center u-flex-between">
									<view class="box__item__name">
										小小
									</view>
									<image src="/static/home/dz.png" @click.stop="clickdz" class="box__item__icon" mode=""></image>
								</view>
								<view class="box__item__contxt" style="width: 470rpx;">
									jashdkjhaskjdhashbdasjhbfahsbfah哈达阿布多啊啊收到货啊就是几号的啊挥手道别哈不会好礼哦啊发经发局
								</view>
								<image src="" class="box__item__pic" mode=""></image>
								<view class="box__item__time">
									刚刚
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
			今日校果 @2022
		</view>
		<view class="footerbox">
			<image src="" class="footerbox__tx" mode="aspectFill"></image>
			<view class="footerbox__inp" @click="show=true">
				发表评论...
			</view>
		</view>
		<view class="rb">
			<view class="rb__item" v-for="(item,index) in rblist" :key="index" @click="navto('/pages/tabbar/'+item.url,item.type)">
				<image :src="'/static/home/'+item.icon+'.png'" class="rb__item__icon" mode=""></image>
				<view class="rb__item__text">
					{{item.name}}
				</view>
			</view>
		</view>
		<!-- 评论弹框 -->
		<u-popup mode="center" :show="show" @close="show=false" round="28rpx">
			<view class="popbox">
				<view class="popbox__title">
					发表评论
				</view>
				<view class="popbox__conbox">
					<u-textarea placeholder="请输入内容" border="none" placeholderStyle="font-size:26rpx;"
						height="230rpx"></u-textarea>
					<view class="" style="margin-left: 9px;">
						<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" width='140rpx' height='140rpx' multiple
							:maxCount="1"></u-upload>
					</view>
				</view>
				<view class="popbox__footer">
					<u-button text="提交评论" @click="submit" color="#5D84E1"></u-button>
				</view>
			</view>
		</u-popup>
		<!-- 回复弹框 -->
		<u-popup mode="center" :show="show1" @close="show1=false" round="28rpx">
			<view class="popbox">
				<view class="popbox__title">
					发表回复
					
				</view>
				<view class="popbox__txt">
					@小小:可以
				</view>
				<view class="popbox__conbox">
					<u-textarea placeholder="请输入内容" border="none" placeholderStyle="font-size:26rpx;"
						height="230rpx"></u-textarea>
					<view class="" style="margin-left: 9px;">
						<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" width='140rpx' height='140rpx' multiple
							:maxCount="1"></u-upload>
					</view>
				</view>
				<view class="popbox__footer">
					<u-button text="提交评论" @click="submit" color="#5D84E1"></u-button>
				</view>
			</view>
		</u-popup>
		<wanshan ref="wanshan"></wanshan>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pics: ['','',''],
				isdz: false,
				tab: [{
						name: '热度'
					},
					{
						name: '时间'
					},
				],
				curtab: 0,
				show: false,
				fileList1: [],
				show1:false,
				rblist:[
					{name:'发布',icon:'fbicon',type:1,url:'fabu'},
					{name:'消息',icon:'msgicon',type:2,url:'msg'},
					{name:'首页',icon:'homeicon',type:2,url:'home'},
				]
			};
		},
		methods: {
			clickdz() {
				// 判断是否完善
				if(!this.mobile){
					this.$refs.wanshan.open()
					return
				}
				this.isdz = !this.isdz
			},
			submit(){
				// 判断是否完善
				if(!this.mobile){
					this.$refs.wanshan.open()
					return
				}
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1);
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file);
				let fileListLen = this[`fileList${event.name}`].length;
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: "uploading",
						message: "上传中",
					});
				});
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url);
					let item = this[`fileList${event.name}`][fileListLen];
					this[`fileList${event.name}`].splice(
						fileListLen,
						1,
						Object.assign(item, {
							status: "success",
							message: "",
							url: result,
						})
					);
					fileListLen++;
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: "http://192.168.2.21:7001/upload", // 仅为示例，非真实的接口地址
						filePath: url,
						name: "file",
						formData: {
							user: "test",
						},
						success: (res) => {
							setTimeout(() => {
								resolve(res.data.data);
							}, 1000);
						},
					});
				});
			},
		}
	}
</script>

<style lang="scss">
	.head {
		padding: 30rpx 30rpx 10rpx;

		&__tx {
			width: 65rpx;
			height: 65rpx;
			background: #616161;
			margin-right: 20rpx;
			border-radius: 50%;
			margin-right: 19rpx;
		}

		&__name {
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 500;
			font-size: 27rpx;
			color: #868686;
			line-height: 27rpx;
			margin-right: 26rpx;
		}

		&__eye {
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 500;
			font-size: 18rpx;
			color: #828187;
			line-height: 18rpx;
		}

		&__time {
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #B0B0B0;
			line-height: 24rpx;
			margin-top: 5rpx;
		}

		&__title {
			display: flex;
			align-items: center;
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #2E2E2E;
			line-height: 43rpx;
			margin-top: 16rpx;
		}

		&__jb {
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #696F7F;
			line-height: 24rpx;
		}

		&__zd {
			width: 62rpx;
			height: 36rpx;
			background: #6086DB;
			border-radius: 6rpx 6rpx 6rpx 6rpx;
			margin-right: 10rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 500;
			font-size: 23rpx;
			color: #EAFEFF;
		}

		&__text {
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #2E2E2E;
			line-height: 43rpx;
			width: 646.88rpx;
		}

		&__pics {
			display: flex;
			align-items: center;
			margin: 30rpx 0 0;
			flex-wrap: wrap;

			&__pic{
				width: 45%;
				height: 180rpx;
				background: #C6CACD;
				border-radius: 10rpx;
				margin-bottom: 15rpx;
				margin-right: 20rpx;
			}
			&__pic1{
				width: 33%;
				height: 180rpx;
				background: #616161;
				border-radius: 10rpx;
				margin-bottom: 15rpx;
				margin-right: 0;
			}
		}

		&__ht {
			display: flex;
			align-items: center;
			padding: 0 22rpx 0 16rpx;
			height: 48rpx;
			background: #F6F6F6;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 500;
			font-size: 23rpx;
			color: #656565;

			&__icon {
				width: 30rpx;
				height: 30rpx;
				margin-right: 10rpx;

			}
		}

		&__icon {
			width: 36rpx;
			height: 36rpx;
			margin: 0 8rpx 0 30rpx;
		}

		&__num {
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 500;
			font-size: 23rpx;
			color: #000000;
		}

		&__rb {
			width: 80rpx;
			height: 73rpx;
			margin-right: 19rpx;
		}

		&__text {
			width: 460rpx;
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #4C4B50;
			overflow: hidden;
			height: 88rpx;
			line-height: 44rpx;
			position: relative;
			&__indexicon{
				width: 30rpx;
				height: 38rpx;
				position: absolute;
				top: 6rpx;
				left: 0;
			}
			&__index{
				font-family: DINNextLTPro, DINNextLTPro;
				font-weight: 500;
				font-size: 24.43rpx;
				color: #90939A;
			}
		}
		&__iconr{
			width: 122rpx;
			height: 88rpx;
		}
	}

	.box {
		padding: 30rpx;

		&__title {
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 800;
			font-size: 28rpx;
			color: #000000;
			line-height: 28rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 30rpx;

			&__tab {
				width: 197rpx;
				height: 65rpx;
				background: #EEEEEE;
				border-radius: 9rpx 9rpx 9rpx 9rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				&__item {
					width: 93rpx;
					height: 54rpx;
					background: #EEEEEE;
					border-radius: 9rpx 9rpx 9rpx 9rpx;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 24rpx;
					color: #2B2B2B;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.active {
					background: #fff;
					color: #5F6C8C;
				}
			}
		}

		&__item {
			display: flex;

			&__l {
				width: 84rpx;
			}

			&__tx {
				width: 60rpx;
				height: 60rpx;
				background: #949496;
				border-radius: 50%;
			}

			&__r {
				padding-top: 15rpx;
				flex: 1;
			}

			&__name {
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 800;
				font-size: 26rpx;
				color: #69708D;
				line-height: 24rpx;
			}

			&__icon {
				width: 30rpx;
				height: 30rpx;
			}

			&__contxt {
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 800;
				font-size: 29rpx;
				color: #676767;
				line-height: 42rpx;
				width: 590rpx;
				margin: 16rpx 0 0;
				word-break: break-word;
			}

			&__pic {
				width: 100rpx;
				height: 100rpx;
				border-radius: 9rpx;
				background: #616161;
				margin-top: 26rpx;
			}

			&__time {
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 500;
				font-size: 22rpx;
				color: #A9A9A9;
				line-height: 22rpx;
				margin-top: 16rpx;
			}
		}
	}

	.footer {
		width: 750rpx;
		height: 314rpx;
		background: #F9F9F9;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: PingFang-SC, PingFang-SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #C8C8C8;
	}

	.footerbox {
		width: 750rpx;
		height: 102rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: center;

		&__tx {
			width: 68rpx;
			height: 68rpx;
			background: #777777;
			margin-left: 30rpx;
			margin-right: 24rpx;
			border-radius: 50%;
		}

		&__inp {
			width: 550rpx;
			height: 67rpx;
			background: #F9F9F9;
			border-radius: 33rpx 33rpx 33rpx 33rpx;
			display: flex;
			align-items: center;
			padding-left: 35rpx;
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 500;
			font-size: 27rpx;
			color: #848484;
			line-height: 67rpx;
		}
	}

	.popbox {
		width: 572.81rpx;
		border-radius: 28rpx 28rpx 28rpx 28rpx;
		padding: 36rpx 44rpx 65rpx;

		&__title {
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 800;
			font-size: 35rpx;
			color: #1A1A1A;
			line-height: 35rpx;
			margin-bottom: 24rpx;
			text-align: center;
		}

		&__conbox {
			background: #F9F9F9;
			::v-deep.u-textarea {
				background-color: #F9F9F9 !important;
			}
		}

		&__footer {
			padding: 44rpx 56rpx 0;
		}
		&__txt{
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 500;
			font-size: 21rpx;
			color: #979797;
			line-height: 20rpx;
			margin-bottom: 25rpx;
		}
	}
	.rb{
		width: 79rpx;
		background: #777777;
		position: fixed;
		bottom: 156rpx;
		right: 18rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 19rpx 0 0;
		&__item{
			display: flex;
			flex-direction: column;
			align-items: center;
			&__icon{
				width: 31rpx;
				height: 31rpx;
				margin-bottom: 10rpx;
			}
			&__text{
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 500;
				font-size: 23rpx;
				color: #FFFFFF;
				line-height: 23rpx;
				margin-bottom: 19rpx;
			}
		}
	}
</style>